<script setup lang="ts">
defineOptions({
  name: "fabBoardGas"
});

import { ref, onMounted, nextTick, inject } from "vue";
import fabBoardModelBox from "../fabBoardModelBox.vue";
import gasSpecialGas from "./components/gasSpecialGas.vue";
import gasDetectorStatus from "./components/gasDetectorStatus.vue";
import gasChemicals from "./components/gasChemicals.vue";
import gasDetectorTask from "./components/gasDetectorTask.vue";
import gasAtmosphere from "./components/gasAtmosphere.vue";
import { queryPlatformOverview, queryDetectorStatusStat, queryDetectorIsolationTasks } from "@/api/modules/operation";

const emitBoardAreaEventCb = inject("emitBoardAreaEvent") as Function;

const gasSpecialGasRef = ref<InstanceType<typeof gasSpecialGas> | null>(null);
const gasDetectorStatusRef = ref<InstanceType<typeof gasDetectorStatus> | null>(null);
const gasChemicalsRef = ref<InstanceType<typeof gasChemicals> | null>(null);
const gasDetectorTaskRef = ref<InstanceType<typeof gasDetectorTask> | null>(null);
const gasAtmosphereRef = ref<InstanceType<typeof gasAtmosphere> | null>(null);

const title = ref<string>("气化科关注指标");
const area = ref<string>("");
const loading = ref<boolean>(false);
const gasDetectorStatusLoading = ref<boolean>(false);
const gasDetectorTaskLoading = ref<boolean>(false);

// 数据  侦测器状态统计
const detectorStatusStatData = ref<any>(null);
// 数据  侦测器隔离今日任务
const detectorIsolationTasksData = ref<any>(null);

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  emitBoardAreaEventCb("gas", val);
  // 特气
  gasSpecialGasRef.value.querySelectOptionsFn(async () => {
    await nextTick();
    gasSpecialGasRef.value.initData();
    await nextTick();
    gasSpecialGasRef.value.init(flag);
  });
  // 化学品
  gasChemicalsRef.value.querySelectOptionsFn(async () => {
    await nextTick();
    gasChemicalsRef.value.initData();
    await nextTick();
    gasChemicalsRef.value.init(flag);
  });
  // 大宗气体
  gasAtmosphereRef.value.querySelectOptionsFn(async () => {
    await nextTick();
    gasAtmosphereRef.value.initData();
    await nextTick();
    gasAtmosphereRef.value.init(flag);
  });
};

const startLoading = () => {
  // 侦测器状态统计
  gasDetectorStatusLoading.value = true;
  // 侦测器隔离今日任务
  gasDetectorTaskLoading.value = true;
};

// 获取数据  侦测器状态统计 + 侦测器隔离今日任务
const queryDetectorDataFn = async () => {
  // 侦测器状态统计
  detectorStatusStatData.value = await queryDetectorStatusStat(null, () => {
    gasDetectorStatusLoading.value = false;
  });
  // 侦测器隔离今日任务
  detectorIsolationTasksData.value = await queryDetectorIsolationTasks(null, () => {
    gasDetectorTaskLoading.value = false;
  });
};

const queryData = async () => {
  // 获取数据  侦测器状态统计 + 侦测器隔离今日任务
  await queryDetectorDataFn();
};

const renderData = async () => {
  // 侦测器状态统计
  gasDetectorStatusRef.value?.init();
  // 侦测器隔离今日任务
  gasDetectorTaskRef.value?.init();
};

const init = async () => {
  // 开启loading
  startLoading();
  // 获取数据
  await queryData();
  await nextTick();
  await renderData();
};

onMounted(() => {
  init();
});
</script>

<template>
  <fabBoardModelBox v-model="area" v-model:loading="loading" :title="title" @change="areaChangeHandler">
    <div class="gas-content">
      <div class="gas-content-item gas-special-gas">
        <!-- 特气 -->
        <gasSpecialGas ref="gasSpecialGasRef" :area="area" />
      </div>
      <div class="gas-content-item gas-detector-status">
        <!-- 侦测器状态统计 -->
        <gasDetectorStatus ref="gasDetectorStatusRef" v-model:loading="gasDetectorStatusLoading" :data="detectorStatusStatData" />
      </div>
      <div class="gas-content-item gas-chemicals">
        <!-- 化学品 -->
        <gasChemicals ref="gasChemicalsRef" :area="area" />
      </div>
      <div class="gas-content-item gas-detector-task">
        <!-- 侦测器隔离今日任务 -->
        <gasDetectorTask ref="gasDetectorTaskRef" v-model:loading="gasDetectorTaskLoading" :data="detectorIsolationTasksData" />
      </div>
      <div class="gas-content-item gas-atmosphere">
        <!-- 大宗气体 -->
        <gasAtmosphere ref="gasAtmosphereRef" :area="area" />
      </div>
    </div>
  </fabBoardModelBox>
</template>

<style lang="scss" scoped>
.gas-content {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(4, 25%);
  gap: 8px;
  width: calc(100% - 24px);
  height: 100%;

  .gas-content-item {
    // background-color: pink;
  }

  .gas-special-gas {
    grid-area: 1 / 1 / 3 / 4;
  }

  .gas-detector-status {
    grid-area: 1 / 4 / 4 / 5;
  }

  .gas-chemicals {
    grid-area: 3 / 1 / 5 / 4;
  }

  .gas-detector-task {
    grid-area: 4 / 4 / 7 / 5;
  }

  .gas-atmosphere {
    grid-area: 5 / 1 / 7 / 4;
  }
}
</style>
